import React, { Component } from 'react'

export default class LifeCycle2 extends Component {
    constructor(props){
        super(props)
        this.state={
            title:props.info.title
        }
    }
    modifyPropsTitle = () => {
       this.setState({
         title:'生命周期测试'
       })
    }
    useForceUpdate=()=>{
        this.forceUpdate() //页面强制刷新操作
    }
    modifyProps2=()=>{
        this.props.info.title="生命周期测试2"
        this.props.callback()
    }
    //不常用,该方法的返回值的结果决定是否要执行render函数，如果该函数的返回值是true,则会执行render,如果该函数的返回结果是false,则不执行render
    shouldComponentUpdate(){
        console.log('----------shouldComponentUpdate-------------');
        return true
    }
    //render会被执行n+1次（n表示更新一次执行一次，1是在加载阶段执行）
    render() {
        console.log('--------render-----------');
        return (
            <div>
                <h1>{this.state.title}</h1>
                <h2>{this.props.info.title}</h2>
                <button onClick={this.modifyPropsTitle}>setState</button>
                <button onClick={this.useForceUpdate}>forceUpdate</button>
                <button  onClick={this.modifyProps2}>new Props</button>
                
            </div>
        )
    }
    componentDidUpdate(){
        console.log('*********componentDidUpdate********************');
    }
}
